<template>
	<view class="page flex_c">
		<navBar title="动态回复" bg="#030301" color="#FFF"></navBar>

		<view class="block">
			<view class="video" v-if="data.video">
				<video :src="data.video"></video>
			</view>

			<swiper v-else :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(item,index) in data.images" class="item">
					<image :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>

			<u-popup :show="show" @close="show = false" round="32rpx">
				<view class="popup flex_c">
					<view class="block">
						<scroll-view scroll-y="true" @scrolltolower="onReach">
							<view class="list flex_center" v-for="(item,index) in list" :key="index">
								<view class="avatar">
									<image :src="item.avatar" mode="aspectFill">
									</image>
								</view>
								<view class="list_content">
									<view class="nickname flex_center" @click="onEval(item.id,item.user_id)">
										<text class="hidden">{{ item.nickname || '' }}</text>
										<view v-if="data.user_id == item.user_id">作者</view>
									</view>
									<view class="content" @click="onEval(item.id,item.user_id)">{{ item.content }}
									</view>
									<view class="text flex_center" @click="onEval(item.id,item.user_id)">
										<view>
											<uni-dateformat :date="item.create_time" format="MM-dd"></uni-dateformat>
										</view>
										<!-- <view>27.31 km 昌平区</view> -->
										<text>回复</text>
									</view>

									<view class="child flex_center" v-for="(val,i) in item.child">
										<view class="child_avatar">
											<image :src="val.avatar" mode="aspectFill">
											</image>
										</view>
										<view class="child_content" @click.stop="onEval(item.id,val.user_id)">
											<view class="nickname flex_center">
												<text class="hidden">{{ val.nickname || '' }}</text>
												<text class="hidden" v-if="val.to_nickname"> 回复 {{ val.to_nickname || '' }}</text>
												<view v-if="data.user_id == val.user_id">作者</view>
											</view>
											<view class="content">{{ val.content || '' }}</view>
											<view class="text flex_center">
												<view>
													<uni-dateformat :date="val.create_time"
														format="MM-dd"></uni-dateformat>
												</view>
												<!-- <view>27.31 km 昌平区</view> -->
												<text>回复</text>
											</view>
										</view>
									</view>

									<view class="more flex_center"
										v-if="item.child_num >= item.child.length && item.child_num!=0">
										<view class="border"></view>
										<view class="more_block flex_center" v-if="item.child_num > item.child.length"
											@click="showMore(item,index)">
											<text>展开{{ item.child_num }}条回复</text>
											<u-icon name="arrow-down" color="#999999" size="20rpx"></u-icon>
										</view>
										<view class="more_block flex_center" v-if="item.child_num == item.child.length"
											@click="hideMore(item,index)">
											<text>收起</text>
											<u-icon name="arrow-up" color="#999999" size="20rpx"></u-icon>
										</view>
									</view>
								</view>
							</view>

							<view style="height: 30rpx;"></view>
						</scroll-view>
					</view>

					<view class="input">
						<view class="tag flex_center">
							<view class="item flex_r_around" @click="discuss_user_type = 1"
								:id="discuss_user_type == 1 ? 'select' : ''">
								<view class="flex_center">
									<image :src="$util.prefix('circle/circle_eval_bymeself.png')"></image>
									<text>作者回复</text>
								</view>
							</view>
							<view class="item flex_r_around" @click="discuss_user_type = 2"
								:id="discuss_user_type == 2 ? 'select' : ''">
								<view class="flex_center">
									<image :src="$util.prefix('circle/circle_eval_byother.png')"></image>
									<text>用户回复</text>
								</view>
							</view>
						</view>
						<view class="inp flex_center">
							<input :focus="focus" ref="evalInput" type="text" placeholder="友善言论，文明发言"
								placeholder-class="input-placeholder" v-model="content" @blur="onBlur"
								@confirm="onConfirm" />
						</view>
					</view>
				</view>
			</u-popup>

			<liu-drag-button @clickBtn="show = true" :bottomPx="360">评论</liu-drag-button>

			<view class="bottom"></view>

		</view>


	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue'
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				show: false,

				discuss_user_type: 1,

				circle_id: 0,

				data: {},

				pid: 0,
				to_user_id: 0,

				content: '',

				list: [],
				total: 0,
				page: 1,

				focus: false,

			}
		},
		methods: {
			getDiscuss() {
				this.$get('/article/getDiscuss', {
					article_id: this.data.id,
					pid: 0,
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					res.data.data.forEach(element => {
						element.child = [];
						element.page = 0;
						this.list.push(element);
					})
				})
			},

			showMore(item, index) {
				item.page++;
				this.$get('/article/getDiscuss', {
					article_id: this.data.id,
					pid: item.id,
					page: item.page
				}).then(res => {
					this.list[index].child.push(...res.data.data);
				})
			},

			hideMore(item, index) {
				this.list[index].page = 0;
				this.list[index].child = [];
			},

			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getDiscuss();
				}
			},

			onBlur() {
				this.pid = 0;
				this.to_user_id = 0;
				this.focus = false;
			},

			onEval(pid, to_user_id) {
				this.pid = pid;
				this.to_user_id = to_user_id;
				this.focus = true;
			},

			onConfirm() {
				this.$post('/article/circleDiscuss', {
					article_id: this.data.id,
					pid: this.pid,
					content: this.content,
					circle_id: this.circle_id,
					discuss_user_type: this.discuss_user_type,
					to_user_id: this.to_user_id
				}).then(res => {
					this.content = '';
					this.page = 1;
					this.list = [];
					this.getDiscuss();
				});
			},

			getDetail(article_id) {
				this.$get('/article/getInfo', {
					article_id: article_id
				}).then(res => {
					this.data = res.data;
					if(this.data.images){
						this.data.images = res.data.images.split(',');
					}
					this.show = true;
					this.getDiscuss();
				})
			},

		},

		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id);
			}
			this.circle_id = option.circle_id || 0;

		}
	}
</script>

<style lang="less" scoped>
	.page {
		height: 100vh;
		padding-bottom: 44px;
		background: #030301;
	}

	.block {
		width: 100vw;
		flex: 1;
		overflow: hidden;
	}

	.video {
		width: 100%;
		height: 100%;

		video {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.swiper {
		width: 100%;
		height: 100%;

		.item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
			}
		}

	}

	.popup {
		height: 70vh;
		padding: 32rpx 0;
		overflow: hidden;

		.block {
			flex: 1;
			width: 100%;
			padding: 0 32rpx;
		}

		scroll-view {
			height: 100%;
		}

		.list {
			overflow: hidden;
			align-items: flex-start;
			width: 100%;
			margin-bottom: 40rpx;

			.avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 72rpx;
				overflow: hidden;
				margin-right: 16rpx;
				background: #D8D8D8;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}

			.list_content {
				flex: 1;

				.nickname {
					text {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						max-width: 300rpx;
					}

					view {
						font-size: 24rpx;
						color: #FFFFFF;
						padding: 0rpx 6rpx;
						background: #FD2A53;
						border-radius: 4rpx;
						margin-left: 8rpx;
					}
				}

				.content {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin: 4rpx 0;
				}

				.text {
					view {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin-right: 12rpx;
					}

					text {
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
					}
				}

				.child {
					align-items: flex-start;
					margin-top: 24rpx;

					.child_avatar {
						width: 40rpx;
						height: 40rpx;
						background: #D8D8D8;
						border-radius: 20rpx;
						overflow: hidden;
						margin-right: 16rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.child_content {
						flex: 1;

						.nickname {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
						}

						.content {
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
						}

						.text {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
						}

					}
				}

				.more {
					margin-top: 32rpx;

					.border {
						width: 40rpx;
						height: 2rpx;
						background: #CCCCCC;
					}

					.more_block {
						margin-left: 26rpx;

						text {
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							margin-right: 6rpx;
						}
					}
				}

			}


		}

		.input {
			padding: 20rpx 32rpx 30rpx;
			width: 750rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(230, 230, 230, 0.5);

			.tag {
				#select {
					background: #FDEFF2;
					border: 2rpx solid #FD2A53;

					text {
						color: #FD2A53;
					}
				}

				.item {
					margin-right: 16rpx;
					width: 176rpx;
					height: 56rpx;
					background: #F1F1F1;
					border-radius: 28rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}

					text {
						font-size: 26rpx;
						color: #333333;
						line-height: 32rpx;
					}
				}
			}

			.inp {
				height: 80rpx;
				background: #F1F1F1;
				border-radius: 40rpx;
				padding: 0 24rpx;
				margin-top: 20rpx;

				input {
					width: 100%;
					font-size: 28rpx;
					color: #333;
				}
			}
		}

	}
</style>